import { HashRouter, Route, Routes, useNavigate } from "react-router-dom";
import ListPage from "./ListPage";
import MainPage from "./MainPage";
import Setting from "./Setting";
import './App.css'
import { useEffect } from "react";
import { EventsOff, EventsOn } from '@runtime'

export default function App() {

    return <HashRouter>
        <GlobalNavigateEvent />
        <Routes>
            <Route path="/" element={<ListPage />} />
            <Route path="/note" element={<MainPage />} />
            <Route path="/setting" element={<Setting />} />
        </Routes>
    </HashRouter >
}

function GlobalNavigateEvent() {
    const navigate = useNavigate();

    useEffect(() => {
        EventsOn('router', (route: string) => {
            navigate(route)
        })

        return () => {
            EventsOff('router')
        }
    }, [])

    return <></>
}
